<template>
	<div class="bar">
		<div class="bar-info">
			<img src="http://static.udz.com/uploads/2016/1/29/6bea759297c7d6825d6d7e4ebd353641.jpg" />
			<div class="shop-info">
				<span class="shop-name">BazingaShop</span>
				<span class="star"></span><span class="m-r">活动数:864</span>
				<span class="shop-fans"></span><span class="m-r">粉丝数:18</span>
				<span class="go-btn">进店逛逛</span>
			</div>
		</div>
		<div class="desc">
			美剧达人就是我
		</div>
	</div>
</template>

<script>
</script>

<style scoped lang="less" stylesheet="less">
	.bar {
		border-top: 1px solid #dddddd;
		border-bottom: 1px solid #dddddd;
		font-family: "微软雅黑";
		width: 1200px;
		margin: 20px auto;
		padding: 20px 0;
		overflow: hidden;
		.bar-info {
			float: left;
			padding-right: 40px;
			border-right: 1px solid #dddddd;
			display: inline-block;
			img {
				float: left;
				display: inline-block;
				width: 80px;
				height: 80px;
			}
			.shop-info {
				font-size: 1.1rem;
				float: left;
				.shop-name {
					display: block;
					margin-bottom: 25px;
					font-size: 1.5rem;
				}
				.star{
					display: inline-block;
					width: 28px;
					height: 28px;
					background-image: url("../assets/icons-2.png");
					background-position: -62px -30px;
					vertical-align: middle;
				}
				.shop-fans{
					display: inline-block;
					width: 28px;
					height: 28px;
					background-image: url("../assets/icons-2.png");
					background-position: -92px -30px;
					vertical-align: middle;
				}
				.go-btn{
					padding: 5px 20px;
					border: 1px solid #dddddd;
					color: #666666;
					background-color: #f6f6f8;
					border-radius: 5px;
				}
				.m-r{
					margin-right: 20px;
				}
			}
		}
		.desc {
			/*height: 100%;*/
			/*height: 80px;*/
			padding-left: 20px;
			line-height: 80px;
			float: left;
			/*padding-bottom: 50px;*/
			display: inline-block;
			/*margin: auto 0;*/
		}
	}
</style>